<template>
	<el-row :gutter="20" style="width: 80%; margin: 0 auto; position: relative; top: 60px">
		<el-col :span="24">
			<el-card>
				<el-page-header @back="$route.go(-1)"></el-page-header>

				<div id="main" style="width: 100%; height: 60vh"></div>

				<el-divider>套装效果激活情况</el-divider>
				<el-card shadow="never" style="margin-bottom: 20px; border-left: 4px solid #67c23a">
					<template v-if="activeEffects.length > 0">
						<div v-for="effect in activeEffects" :key="effect.suitName + effect.require" class="effect-item">
							<div class="effect-badge">
								<el-tag type="success" effect="dark" class="suit-tag"> {{ effect.suitName }} {{ effect.require }}件套 </el-tag>
								<el-icon :size="16" class="check-icon"><Check /></el-icon>
							</div>
							<div class="effect-desc">
								{{ effect.description }}
							</div>
						</div>
					</template>
					<el-empty v-else description="尚未激活套装效果" :image-size="80">
						<template #image>
							<el-image src="/src/assets/no-effect.svg" />
						</template>
					</el-empty>
				</el-card>

				<el-divider>个性化属性</el-divider>
				<el-table
					:data="tableData"
					style="width: 100%"
					:header-cell-style="{
						background: '#f8f9fa',
						color: '#606266',
						fontWeight: 600,
						letterSpacing: '0.5px'
					}"
					empty-text="暂无自定义属性"
				>
					<el-table-column prop="des" label="属性描述" align="center" show-overflow-tooltip>
						<template #default="{ row }">
							<div class="attribute-item">
								<el-icon class="attribute-icon"><MagicStick /></el-icon>
								<span class="attribute-text">{{ row.des }}</span>
							</div>
						</template>
					</el-table-column>
				</el-table>
			</el-card>
		</el-col>
	</el-row>
</template>

<script setup>
import request from '@/utils/request'
import settings from '@/utils/settings'
import * as echarts from 'echarts'
import { nextTick, onBeforeMount, onMounted, reactive, ref } from 'vue'
import router from '@/router'
import { ElMessage } from 'element-plus'

const notices = reactive({})
const suitEffects = ref([])
const activeEffects = ref([])

const about = settings.about
const $route = router
const tableData = ref([])
onMounted(async () => {
	const renotices = await request.get(`notice`)
	Object.assign(notices, renotices.data)

	const chartDom = document.getElementById('main')
	const myChart = echarts.init(chartDom)
	let option
	const systemArray = []
	const res = await request.get(`/equip/echarts/${$route.currentRoute.value.query.id.toString()}`)
	const equipData = res.data // 假设接口返回的数据是一个对象，包含装备属性

	// 将装备属性添加到 systemArray
	systemArray.push({ name: '攻击力', value: equipData.aggressivity })
	systemArray.push({ name: '暴击率', value: equipData.critical })
	systemArray.push({ name: '防御', value: equipData.defense })
	systemArray.push({ name: '法力上限', value: equipData.mana })
	systemArray.push({ name: '火焚耐性', value: equipData.fire })
	systemArray.push({ name: '寒冻耐性', value: equipData.ice })
	systemArray.push({ name: '毒伤耐性', value: equipData.drug })
	systemArray.push({ name: '雷蛰耐性', value: equipData.thunder })
	option = {
		title: {
			text: '装备属性汇总',

			left: 'left'
		},
		tooltip: {
			trigger: 'item'
		},
		legend: {
			top: '5%',
			left: 'center'
		},
		series: [
			{
				type: 'pie',
				radius: ['40%', '70%'],
				avoidLabelOverlap: false,
				itemStyle: {
					borderRadius: 10,
					borderColor: '#fff',
					borderWidth: 2
				},
				label: {
					show: false,
					position: 'center'
				},
				emphasis: {
					label: {
						show: true,
						fontSize: 40,
						fontWeight: 'bold'
					}
				},
				labelLine: {
					show: false
				},
				data: systemArray
			}
		]
	}

	option && myChart.setOption(option)

	const retableData = await request.get(`/personality/echarts/${$route.currentRoute.value.query.id.toString()}`)
	tableData.value = retableData.data

	try {
		// 获取选中的所有装备详细信息
		const ids = $route.currentRoute.value.query.id.toString().split(',')
		const equipRes = await request.get(`/equip/batch/${ids.join(',')}`)
		const equips = equipRes.data

		// 统计套装信息
		const suitMap = new Map()
		equips.forEach(equip => {
			if (equip.belongSuit) {
				const suitId = equip.belongSuit
				suitMap.set(suitId, (suitMap.get(suitId) || 0) + 1)
			}
		})

		// 获取所有相关套装效果
		for (const [suitId, count] of suitMap) {
			const suitRes = await request.get(`/suit/${suitId}`)
			const suit = suitRes.data

			suit.effect.forEach(effect => {
				suitEffects.value.push({
					suitName: suit.name,
					require: effect.piece,
					description: effect.description,
					activated: count >= parseInt(effect.piece)
				})
			})
		}

		// 过滤已激活的效果
		activeEffects.value = suitEffects.value.filter(e => e.activated)
	} catch (error) {
		ElMessage.error('获取套装信息失败: ' + error.message)
	}
})
</script>

<style scoped lang="scss">
h1 {
	color: #333;
	font-size: 16px;
	font-weight: bolder;
	line-height: 50px;
}

p {
	color: #666;
	font-size: 16px;
	margin: 10px;
	line-height: 1.5; /* 设置行间距为1.5倍字体大小 */
}
.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.text {
	font-size: 14px;
}

.item {
	margin-bottom: 18px;
}

.box-card {
}
ul {
	list-style: none; /* 移除默认的列表符号 */
	margin: 0;
	padding: 0;
}

li {
	color: #666;
	font-size: 16px;
	line-height: 1.5; /* 设置行间距为1.5倍字体大小 */
	margin-left: 10px;
}
ul:not(:first-child) {
	margin-left: 40px; /* 后两个 ul 向左对齐 */
}

.statistic {
	text-align: center;
}

.effect-item {
	padding: 16px;
	margin: 12px 0;
	background: linear-gradient(90deg, #f6ffed 0%, #f0f9eb 100%);
	border-radius: 8px;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	display: flex;
	align-items: center;
	gap: 16px;

	&:hover {
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(#67c23a, 0.15);
	}

	.effect-badge {
		position: relative;
		.suit-tag {
			font-weight: 500;
			letter-spacing: 0.5px;
			padding: 8px 12px;
			border-radius: 6px;
		}
		.check-icon {
			position: absolute;
			right: -8px;
			bottom: -8px;
			background: #fff;
			border-radius: 50%;
			padding: 2px;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		}
	}

	.effect-desc {
		flex: 1;
		font-size: 14px;
		color: #5a5e66;
		line-height: 1.6;
		padding-right: 16px;
		border-left: 1px dashed #e6e6e6;
		padding-left: 16px;
	}
}

.attribute-item {
	display: flex;
	align-items: center;
	gap: 8px;
	justify-content: center;
	padding: 8px 0;

	.attribute-icon {
		color: #67c23a;
		font-size: 18px;
		vertical-align: middle;
	}

	.attribute-text {
		font-weight: 500;
		color: #303133;
		position: relative;
		&::after {
			content: '';
			position: absolute;
			bottom: -2px;
			left: 0;
			width: 0;
			height: 1px;
			background: #67c23a;
			transition: width 0.3s ease;
		}
	}
}

:deep(.el-table__row) {
	transition: all 0.3s;
	&:hover {
		.attribute-text::after {
			width: 100%;
		}
		td {
			background: #f8f9fa !important;
		}
	}
}

.attribute-item {
	display: flex;
	align-items: center;
	gap: 8px;
	justify-content: center;
	padding: 8px 0;

	.attribute-icon {
		color: #67c23a;
		font-size: 18px;
		vertical-align: middle;
	}

	.attribute-text {
		font-weight: 500;
		color: #303133;
		position: relative;
		&::after {
			content: '';
			position: absolute;
			bottom: -2px;
			left: 0;
			width: 0;
			height: 1px;
			background: #67c23a;
			transition: width 0.3s ease;
		}
	}
}

:deep(.el-table__row) {
	transition: all 0.3s;
	&:hover {
		.attribute-text::after {
			width: 100%;
		}
		td {
			background: #f8f9fa !important;
		}
	}
}
</style>
